<template>
  <!-- 搜索栏 -->
  <el-card class="search-card">
    <el-form :model="searchForm" label-width="80px" inline>
      <el-form-item label="工单编号">
        <el-input v-model="searchForm.productionOrderCode" placeholder="工单编号" clearable />
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input v-model="searchForm.productionOrderName" placeholder="工单名称" clearable />
      </el-form-item>
      <el-form-item label="单据来源">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderSource" placeholder="单据来源">
          <el-option
              v-for="dictData in productionOrderSourceDictDataList"
              :value="dictData.id"
              :label="dictData.dictLabel"
              :key="dictData.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="物料编号">
        <el-input v-model="searchForm.materialCode" placeholder="物料编号" clearable />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchForm.materialName" placeholder="物料名称" clearable />
      </el-form-item>

      <el-form-item label="客户编号">
        <el-input v-model="searchForm.customerCode" placeholder="客户编号" clearable />
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customerName" placeholder="客户名称" clearable />
      </el-form-item>
      <el-form-item label="工单类型">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderType" placeholder="工单类型">
          <el-option
            v-for="dictData in productionOrderTypeDictDataList"
            :value="dictData.id"
            :label="dictData.dictLabel"
            :key="dictData.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select style="width: 120px;" v-model="searchForm.productionOrderStatus" placeholder="请选择状态" clearable>
          <el-option
            v-for="dictData in productionOrderStatusDictDataList"
            :label="dictData.dictLabel"
            :value="dictData.id"
            :key="dictData.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 工具栏 -->
  <div class="toolbar">
    <el-button type="primary" @click="handleAdd">新增工单</el-button>
  </div>
  <!-- 列表 -->
  <el-card class="table-card">
    <el-table
        :data="productionOrderList"
        border
        stripe
    >
      <el-table-column prop="productionOrderCode" label="工单编号">
        <template #default="scope">
          <el-link type="primary" @click="previewProductionOrder(scope.row)">{{scope.row.productionOrderCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="productionOrderName" label="工单名称"/>
      <el-table-column prop="typeDictData.dictLabel" label="工单类型"/>
      <el-table-column prop="sourceDictData.dictLabel" label="工单来源"/>
      <el-table-column prop="orderCode" label="订单编号"/>
      <el-table-column prop="materialCode" label="产品/物料编号"/>
      <el-table-column prop="materialName" label="产品/物料名称"/>
      <el-table-column prop="productionOrderQuantity" label="工单数量"/>
      <el-table-column prop="finishQuantity" label="已生产数量"/>
      <el-table-column prop="customerCode" label="客户编号"/>
      <el-table-column prop="customerName" label="客户名称"/>
      <el-table-column prop="requestDate" label="需求日期"/>
      <el-table-column prop="statusDictData.dictLabel" label="状态">
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button size="small" v-if="scope.row.statusDictData.dictValue == 1" @click="updateProductionOrderView(scope.row)">编辑</el-button>
          <el-button
              v-if="scope.row.statusDictData.dictValue == 1" size="small" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
          <el-button size="small" v-if="scope.row.statusDictData.dictValue == 2" @click="checkProductionOrder(scope.row)">审核</el-button>
          <el-button size="small" type="primary" @click="previewProductionOrder(scope.row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--   分页栏     -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 其他弹窗 -->
  <el-dialog
    :title="dialogTitle"
    v-model="addOrUpdateDialogVisable"
    width="80%">
    <el-form v-model="productionOrderForm" >
      <!-- 第一行：工单编号 + 工单名称 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工单编号" >
            <el-col :span="20">
              <el-input  :disabled="isDetail" v-model="productionOrderForm.productionOrderCode" placeholder="请输入工单编号" />
            </el-col >
            <el-col :span="2">
              <el-switch   :disabled="isDetail" @click="autoCode" inline-prompt active-text="自动生成" inactive-text="自动生成" v-model="isAutoCode" />
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单名称" >
            <el-input  :disabled="isDetail" v-model="productionOrderForm.productionOrderName" placeholder="请输入工单名称" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行：来源类型 + 订单编号 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="来源类型" >
            <el-select  :disabled="isDetail" @change="changeSource" style="width: 120px" clearable v-model="productionOrderForm.productionOrderSource" placeholder="工单类型">
              <el-option
                  v-for="dictData in productionOrderSourceDictDataList"
                  :value="dictData.id"
                  :label="dictData.dictLabel"
                  :key="dictData.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="isCustomerOrder !== false">
          <el-form-item label="订单编号" >
            <el-input  :disabled="isDetail" v-model="productionOrderForm.orderCode" placeholder="请输入订单编号" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行：工单类型 + （右侧预留区域，用空的 el-col 占位） -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工单类型" >
            <el-select  :disabled="isDetail" @change="typeIs" style="width: 120px" clearable v-model="productionOrderForm.productionOrderType" placeholder="工单类型">
              <el-option
                  v-for="dictData in productionOrderTypeDictDataList"
                  :value="dictData.id"
                  :label="dictData.dictLabel"
                  :key="dictData.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 右侧虚线框区域（示例用空 div 模拟，实际可放图片/其他组件） -->
          <div class="dashed-box" ></div>
        </el-col>
      </el-row>
      <!-- 第四行：产品编号 + 产品名称 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item  label="产品编号" >
            <el-input v-model="productionOrderForm.materialCode" placeholder="请选择产品" :disabled="isDetail" >
              <template #append>
                <el-button  @click="selectProduct"  :disabled="isDetail"><el-icon><Search/></el-icon></el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称" >
            <el-input v-model="productionOrderForm.material.name" placeholder="请选择产品" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第五行：规格型号 + 单位 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="规格型号" >
            <el-input v-model="productionOrderForm.material.specification" placeholder="请选择产品" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" >
            <el-input v-model="productionOrderForm.material.unit.name" placeholder="请选择产品" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第六行：工单数量 + 需求日期 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工单数量" >
            <el-input-number v-model="productionOrderForm.productionOrderQuantity"  :disabled="isDetail" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="需求日期" >
            <el-date-picker
                v-model="productionOrderForm.requestDate"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择需求日期"
                :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第七行：客户编码 + 客户名称 -->
      <el-row :gutter="20" v-if="isCustomerOrder !== false && productionOrderForm.customer ">
        <el-col :span="12">
          <el-form-item label="客户编码" >
            <el-input v-model="productionOrderForm.customerCode" placeholder="请选择客户" :disabled="isDetail">
              <template #append>
                <el-button @click="selectCostumer" :disabled="isDetail"><el-icon><Search/></el-icon></el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" >
            <el-input v-model="productionOrderForm.customer.name" placeholder="请输入客户名称" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第八行：供应商编码 + 供应商名称 -->
      <el-row :gutter="20" v-if="isSupplier !== false && productionOrderForm.supplier">
        <el-col :span="12">
          <el-form-item label="供应商编码" >
            <el-input v-model="productionOrderForm.supplierCode" placeholder="请选择供应商"  :disabled="isDetail">
              <template #append>
                <el-button @click="selectSupplier"  :disabled="isDetail"><el-icon><Search/></el-icon></el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商名称" >
            <el-input v-model="productionOrderForm.supplier.name" placeholder="请选择供应商" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第九行：备注 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" >
            <el-input
                v-model="productionOrderForm.remark"
                type="textarea"
                placeholder="请输入内容"
                :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-card v-if="isEdit">
      <el-tabs type="border-card">
        <el-tab-pane label="BOM物料组成">
          <Bom  :parentMaterialId="productionOrderForm.material.id"></Bom>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAddOrUpdate">取消</el-button>
        <el-button v-if="isCheck" @click="checkFail">审核不通过</el-button>
        <el-button v-if="isEdit||isCheck" @click="confirmProductionOrder" type="success">确认</el-button>
        <el-button v-if="isEdit||isAdd"  type="primary" @click="submitProductionOrderForm">保存</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="selectProductVisable" title="选择产品物料" width="80%">
    <ProductList @select-product="handlerSelectProduct"/>
  </el-dialog>
  <el-dialog v-model="selectSupplierVisable" title="选择供应商" width="80%">
    <SupplierList @select-supplier="handlerSelectSupplier"/>
  </el-dialog>
  <el-dialog v-model="selectCustomerVisable" title="选择客户" width="80%">
    <CustomerList @select-customer="handlerSelectCustomer"/>
  </el-dialog>
</template>


<script setup>
// 导入必须的内容
import {ref,onMounted} from "vue";
import {ElMessage,ElMessageBox} from "element-plus";
import {getCodeAuto} from "@/api/codeAuto.js"
import {getProductionOrderList,queryById,queryByCode,addProductionOrder,deleteProductionOrder,updateProductionOrder,batchDeleteProductionOrder} from "@/api/production-order.js";
// 导入字典相关的API
import Bom from "@/views/pro/production-order/Bom.vue";
import {getDictDataList,getDictDataById} from "@/api/dictData.js";
import ProductList from "@/views/pro/workflow/product-list.vue";
import SupplierList from "@/views/pro/production-order/supplier-list.vue";
import CustomerList from "@/views/pro/production-order/customer-list.vue";
import {getMaterialByCode} from "@/api/material.js";
import {getSupplierByCode} from "@/api/supplier.js";
import {getCustomerByCode} from "@/api/customer.js"
import {Search} from "@element-plus/icons-vue";
import WorkflowProduct from "@/views/pro/workflow/workflow-product.vue";
import WorkflowProcess from "@/views/pro/workflow/workflow-process.vue";


// ----- 属性声明 ↓
//
const isAutoCode = ref(false)
// 绑定搜索表单的数据
const searchForm = ref({
  productionOrderCode:"",
  productionOrderName:"",
  materialCode:"",
  materialName:"",
  requestDate:"",
  productionOrderSource:"",
  productionOrderStatus:"",
  customerCode:"",
  customerName:"",
  supplierCode:"",
  productionOrderType:"",
})
// 工单列表数据
const productionOrderList = ref([])
// 分页相关数据
const pagination = ref({
  currentPage:1,
  pageSize:10,
  total:0
})
// 弹窗的标题
const dialogTitle = ref("添加生产工单");
// 弹窗标记
const addOrUpdateDialogVisable = ref(false);
// 编辑标记
const isEdit = ref(false);
// 新增/编辑表单的数据绑定对象
const productionOrderForm = ref({
  id:"",
  productionOrderCode:"",
  productionOrderName:"",
  productionOrderSource:"",
  productionOrderType:"",
  productionOrderStatus:"",
  orderCode:"",
  materialCode:"",
  customerCode:"",
  supplierCode:"",
  productionOrderQuantity:0,
  requestDate:"",
  qrCodeUrl:"",
  material:{name:"",specification:"",unit:{},id:""},
  supplier:{name:""},
  customer:{name:""},
  sourceDictData:{},

})

// 是否是显示详情的标记
const isDetail = ref(false);
// 是否是客户订单
const isCustomerOrder= ref(false)

// 工单类型字典列表
const productionOrderTypeDictDataList = ref([]);
// 工单状态点列表
const productionOrderStatusDictDataList = ref([]);
//工单来源列表
const productionOrderSourceDictDataList = ref([]);
const selectProductVisable = ref(false)
//是否需要供应商标识
const isSupplier = ref(false)
//选择供应商弹窗
const selectSupplierVisable = ref(false)
//选择客户弹窗
const selectCustomerVisable = ref(false)
//确认工单/审核工单标识
const isConfirm = ref(false)
//审核标记
const isCheck = ref(false)
const isAdd = ref(false)
// ----- 属性声明 ↑
// -- 函数声明 ↓
//审核不通过
const checkFail = ()=>{
   let status = productionOrderForm.value.productionOrderStatus
  productionOrderForm.value.productionOrderStatus = status -1;
  updateProductionOrder(productionOrderForm.value).then(res=>{
    if (res.code===200){
      handleSearch();
      ElMessage.success(res.msg);
    }else {
      ElMessage.error(res.msg);
    }
  })
  cancelAddOrUpdate();
}
//审核按钮事件
const checkProductionOrder = (row)=>{
  dialogTitle.value = "审核工单"
  isCheck.value =true;
  queryById(row.id).then(res=>{
    productionOrderForm.value = res.data;
    changeSource(res.data.productionOrderSource);
    typeIs(res.data.productionOrderType)
  })
  addOrUpdateDialogVisable.value = true;
}
//删除工单
const handleDelete = (row)=>{
  deleteProductionOrder(row.id).then(res=>{

    if (res.code===200){
      handleSearch();
      ElMessage.success(res.msg);
    }else {
      ElMessage.error(res.msg)
    }
  })

}
//编辑按钮事件
const updateProductionOrderView =(row)=>{
  isConfirm.value = true;
  isEdit.value  = true;
  queryById(row.id).then(res=>{
    productionOrderForm.value = res.data
    changeSource(res.data.productionOrderSource);
    typeIs(res.data.productionOrderType)
  })
  dialogTitle.value = "编辑工单"
  addOrUpdateDialogVisable.value = true
}
//预览工单
const previewProductionOrder = (row)=>{
  dialogTitle.value = "预览工单"
  queryById(row.id).then(res=>{
    productionOrderForm.value = res.data
    changeSource(res.data.productionOrderSource);
    typeIs(res.data.productionOrderType)
    isDetail.value = true;
    addOrUpdateDialogVisable.value = true;
  })
}
//确认客户
const handlerSelectCustomer = (customerCode)=>{
    getCustomerByCode(customerCode).then(res=>{
      productionOrderForm.value.customerCode = res.data.code
      productionOrderForm.value.customer = res.data
      selectCustomerVisable.value = false;
    })

}
//选择客户
const selectCostumer = ()=>{
  selectCustomerVisable.value = true;
}
//选择供应商
const selectSupplier = ()=>{
  selectSupplierVisable.value = true;
}
const changeSource =(selectId)=>{
  getDictDataById(selectId).then(res=>{
    if(res.data.dictLabel === "客户订单"){
      isCustomerOrder.value = true
    }else {
      isCustomerOrder.value = false
      console.log("非客户订单")
    }
  })
}
//是否需要供应商
const typeIs = (selectId)=>{
  getDictDataById(selectId).then(res=>{
    if (res.data.dictLabel === "外购"){

      isSupplier.value = true;
      console.log("有供应商");
      console.log(isSupplier.value)
    }else {
      isSupplier.value = false;
      console.log("没有供应商");
    }
  })

}
//提交选择产品
const handlerSelectProduct = (productCode)=>{
  getMaterialByCode(productCode).then(res=>{
    console.log(res);
    productionOrderForm.value.materialCode = res.data.code;
    productionOrderForm.value.material  = res.data;
    selectProductVisable.value = false;
  })
}
//提交选择供应商
const handlerSelectSupplier = (supplierCode) =>{
  getSupplierByCode(supplierCode).then(res=>{
    productionOrderForm.value.supplierCode = res.data.code;
    productionOrderForm.value.supplier = res.data;
    selectSupplierVisable.value = false;
  })
}
//选择产品
const selectProduct = ()=>{
  selectProductVisable.value = true;
  console.log("???");
}
//重置查询表单
const resetSearch = ()=>{
    searchForm.value.productionOrderCode = "";
    searchForm.value.productionOrderName = "";
    searchForm.value.productionOrderSource="";
    searchForm.value.productionOrderType="";
    searchForm.value.customerName ="";
    searchForm.value.customerCode ="";
    searchForm.value.materialCode ="";
    searchForm.value.materialName ="";
    searchForm.value.requestDate ="";
}
const loadProductionOrderStatusDictDataList=()=>{
  getDictDataList({dictType:"PRODUCTION_ORDER_STATUS"}).then(res=>{
    productionOrderStatusDictDataList.value = res.data.records;
  })
}
//加载工单来源字典的函数
const loadProductionOrderSourceDictDataList = ()=>{
  getDictDataList({dictType:"PRODUCTION_ORDER_SOURCE"}).then(res=>{
    productionOrderSourceDictDataList.value = res.data.records;
  })
}
// 加载工单类型字典的函数
const loadProductOrderDictDataList=()=>{
  getDictDataList({dictType:"PRODUCTION_ORDER_TYPE"}).then(res=>{
    productionOrderTypeDictDataList.value = res.data.records;
  })
}
//修改工单状态，确认工单/审核工单
const confirmProductionOrder = ()=>{
  let status = productionOrderForm.value.productionOrderStatus;
  productionOrderForm.value.productionOrderStatus = status + 1;
  updateProductionOrder(productionOrderForm.value).then(res=>{
    if (res.code===200){
      handleSearch();
      ElMessage.success(res.msg);
    }else {
      ElMessage.error(res.msg);
    }
  })
  cancelAddOrUpdate();
}
// 提交新增/编辑审核表单的按钮事件
const submitProductionOrderForm = ()=>{
  console.log(isEdit.value)
   if (isEdit.value){
     updateProductionOrder(productionOrderForm.value).then(res=>{
       if (res.code === 200){
         handleSearch();
         ElMessage.success(res.msg)
       }else {
         ElMessage.error(res.msg)
       }
     })
   }else {
     addProductionOrder(productionOrderForm.value).then(res=>{
       if (res.code === 200){
         handleSearch();
         ElMessage.success(res.msg)
       }else {
         ElMessage.error(res.msg)
       }
     })
   }
   cancelAddOrUpdate();
}
// 取消新增/编辑的事件
const cancelAddOrUpdate = ()=>{
  productionOrderForm.value = {
    id:"",
    productionOrderCode:"",
    productionOrderName:"",
    productionOrderSource:"",
    productionOrderType:"",
    productionOrderStatus:"",
    orderCode:"",
    materialCode:"",
    customerCode:"",
    supplierCode:"",
    productionOrderQuantity:0,
    requestDate:"",
    qrCodeUrl:"",
    material:{name:"",specification:"",unit:{}},
    supplier:{name:""},
    customer:{name:""}
  }
  isCheck.value = false;
  isAdd.value = false;
  isEdit.value = false;
  isConfirm.value = false;
  isDetail.value = false;
  dialogTitle.value = "添加生产工单"
  addOrUpdateDialogVisable.value = false;
}
// 自动生成编号的事件
const autoCode = ()=>{
if (isAutoCode.value){
  getCodeAuto("PRODUCTION_ORDER_CODE").then(res =>{
    if (res.code === 200){
      productionOrderForm.value.productionOrderCode = res.data
    }else {
      isAutoCode.value = false
      ElMessage.error("编码生成失败")
    }
  })
}else {
  productionOrderForm.value.productionOrderCode = ""
}
}
// 新增工单的按钮事件
const handleAdd = ()=>{
  isAdd.value = true;
  productionOrderForm.value = {
    id:"",
    productionOrderCode:"",
    productionOrderName:"",
    productionOrderSource:"",
    productionOrderType:"",
    productionOrderStatus:0,
    orderCode:"",
    materialCode:"",
    customerCode:"",
    supplierCode:"",
    productionOrderQuantity:0,
    requestDate:"",
    qrCodeUrl:"",
    material:{name:"",specification:"",unit:{}},
    supplier:{name:""},
    customer:{name:""}
  }
  addOrUpdateDialogVisable.value = true;

}
// 改变了每页大小的事件
const handleSizeChange =(pageSize)=>{
  pagination.value.pageSize = pageSize;
  handleSearch();
}
// 改变页面的事件  翻页事件
const handleCurrentChange =(newPage)=>{
  pagination.value.currentPage = newPage;
  handleSearch();
}
// 搜索数据的事件
const handleSearch=()=> {
  // 调用查询的接口查询数据
  let params = {};// 这里需要组织参数--------------
  // 请求参数就是searchForm.vaue 和  page相关的参数
  params = searchForm.value;// 这里只包含了搜索条件，没有分页参数
  params.pageNum = pagination.value.currentPage;
  params.pageSize = pagination.value.pageSize;
  getProductionOrderList(params).then(res=>{
    productionOrderList.value = res.data.list;
    pagination.value.total = res.data.total;
    console.log("productionOrderList:")
    console.log(productionOrderList.value)
  })

}
// -- 函数声明 ↑
onMounted(()=>{
  handleSearch();
  loadProductionOrderStatusDictDataList();
  loadProductOrderDictDataList();
  loadProductionOrderSourceDictDataList()
})


</script>

<style scoped>
.customer-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>